<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<style>
		.container {
			width: 200px;
			height: 200px;
			position: absolute;
			background-color: pink;
		}
	</style>

	<body>
		<div class="container"></div>

		<script>
			const card = document.querySelector('.container');

			// 鼠标移入
			card.onmouseenter = (event) => {
				event.target.style.cursor = 'grab';
			};

			// 鼠标抬起
			card.onmouseup = (event) => {
				event.target.style.cursor = 'grab';
			};

			// 鼠标按下
			card.onmousedown = (e) => {
				e.target.style.cursor = 'grabbing';
				let x = e.pageX - card.offsetLeft;
				let y = e.pageY - card.offsetTop;

				window.onmousemove = (e) => {
					const cx = e.pageX - x;
					const cy = e.pageY - y;
					card.style.left = cx + 'px';
					card.style.top = cy + 'px';
				};

				window.onmouseup = () => {
					window.onmousemove = null;
					window.onmouseup = null;
				};
			};
		</script>
	</body>
</html>
